<!--
 * @description  : 市管检查-线索登记组件
 * @descriptionDetail: 市管检查-线索登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
  <view>
    <theme-navbar
      :isBack="true"
      :is-white="false"
      title="线索登记"
      :customBack="handlerBack"
      style="z-index: 99999"
    >
      <view class="nav-right-icon" v-if="!isDisabled" @tap="handlerSure">
        确定
      </view>
    </theme-navbar>
    <view>
      <view v-for="(item, idx) in records" :key="idx">
        <u-cell-item :title="item.itemName" :arrow="false" class="cell" :title-style="mainLabelStyle" v-if="item.operateType == '91401'">
          <u-switch slot="right-icon" v-model="checkObj[item.checkKey]" @change="handlerSwitch"></u-switch>
        </u-cell-item>
        <u-field
          type="textarea"
          placeholder="请输入"
          label="备注"
          label-width="80"
          style="height: 100px;"
          :disabled="isDisabled"
          v-else
          v-model="checkObj[item.checkKey]"
        >
        </u-field>
        <view v-show="checkObj[item.checkKey] && item.operateType == '91401'">
          <u-cell-item
            class="cell cell-sub"
            title="处理方式" 
            :value="item.checkDataLabel"
            :arrow="true"
            v-if="item.dealList && item.dealList.length > 0"
            @click="handlerShowSelect(item)"
          ></u-cell-item>

          <view v-for="(record, rIdx) in item.nextRecords" :key="rIdx">
            <!-- 是否选择 -->
            <u-cell-item class="cell cell-sub" :title="record.itemName" :arrow="false" v-if="record.operateType == '91401'">
              <u-switch slot="right-icon" v-model="checkObj[record.checkKey]" @change="handlerSwitch"></u-switch>
            </u-cell-item>
            <!-- 添加卷烟 -->
            <u-cell-item class="cell cell-sub" :title="record.itemName" :arrow="false" v-else-if="record.operateType == '91411'">
              <u-icon name="plus-circle" color="#2979ff" size="38" slot="right-icon" @tap="handlerAdd(record)"></u-icon>
            </u-cell-item>
            <!-- 收购人员登记 -->
            <u-cell-item class="cell cell-sub" :title="record.itemName" :arrow="false" v-else-if="record.operateType == '91412'">
              <u-icon name="plus-circle" color="#2979ff" size="38" slot="right-icon" @tap="handlerAddPersons(record)"></u-icon>
            </u-cell-item>
            <!-- 图片上传 -->
            <u-cell-item class="cell cell-sub" :title="record.itemName" :arrow="false" v-else-if="record.operateType == '91405'">
              <u-icon name="plus-circle" color="#2979ff" size="38" slot="right-icon" @tap="handlerAdd(record)"></u-icon>
            </u-cell-item>

            <view style="padding-left: 10px;" v-if="personsMap[record.itemUuid]">
              <u-row gutter="16" v-for="(pItem, pIdx) in personsMap[record.itemUuid]" :key="pIdx">
                <u-col span="9">
                  <view class="title">
                    {{ pItem.personName }}
                  </view>
                </u-col>
                <u-col span="3" style="text-align:center;display:flex;">
                  <u-icon
                    name="edit-pen"
                    color="#2979ff"
                    size="32"
                    style="flex: 1;"
                    v-if="!isDisabled"
                    @tap="handlerEditPerson(pItem, record.itemUuid)"
                  ></u-icon>
                  <u-icon
                    name="trash"
                    color="red"
                    size="32"
                    style="margin-left: 5px;flex: 1;" 
                    v-if="!isDisabled"
                    @tap="handlerDeletePerson(pItem, record.itemUuid)"
                  ></u-icon>
                </u-col>
              </u-row>
            </view>

            <view v-for="(nRecord, nrIdx) in record.nextRecords" v-show="checkObj[record.checkKey]" :key="nrIdx">
              <u-input
                style="margin: 5px 15px 5px 30px;"
                :placeholder="'请输入' + nRecord.itemName"
                type="text"
                :border="true" 
                v-model="nRecord.checkData"
              />
            </view>
          </view>
        </view>
        <u-select :list="item.dealList" :mask-close-able="false" v-model="item.showSelect" @cancel="handlerCloseSelect(item)" @confirm="handlerConfirm($event, item)"></u-select>
      </view>
    </view>
    <u-popup mode="bottom" height="100%" border-radius="16" v-model="personInfoOpen">
      <suspect-person :personData="personInfo" :isDisabled="isDisabled" @back="handlerPersonBack"></suspect-person>
    </u-popup>
  </view>
</template>
<script>
import suspectPerson from './suspect-person.vue';
export default {
  name: "ClueCom",
  components: { suspectPerson, },
  props: {
    menuData: {
      type: Object,
      default: () => {},
    },
    recordDatas: {
      type: Array,
      default: () => [],
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      records: this.recordDatas,
      checkObj: {},
      cigsMap: {},  // 添加的问题卷烟信息
      addItemUuid: '',  // 当前添加卷烟的指标
      preFix: 'L',  // 指标前缀
      mainLabelStyle: {
        // 'color': '#000',
        // 'fontWeight': '600',
      },
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d',
          },
        },
      ],
      dealMap: {},  // 处理方式字典
      personInfoOpen: false,
      personInfo: {}, // 嫌疑人信息
      personsMap: {}, // 添加的嫌疑人信息
      addSuspectUuid: "", // 当前点击添加嫌疑人指标项
    }
  },
  watch: {
    menuData(v) {
      console.log("监听", v);
    },
  },
  created () {
    console.log("数据", this.menuData);
    console.log("recordDatas", this.recordDatas);
    // 还原检查项数据
    let storageRecordMap = {};
    this.menuData.records.forEach(r => storageRecordMap[this.preFix + r.itemUuid] = r.checkData);
    // 从检查任务对象中还原人员信息
    this.menuData.suspectedPersons && this.menuData.suspectedPersons.forEach(p => {
      this.personsMap[p.itemUuid] = this.personsMap[p.itemUuid] ? [p, ...this.personsMap[p.itemUuid],] : [p,];
    });
    let dicts = uni.getStorageSync('caseDicts');
    dicts.forEach(d => {
      if (d.bctPhName == 'M_CHECK_HANDLE_RESULT_ZJ') {
        this.dealMap[d.bcbCode] = d.bcbName;
      }
    });
    this.records.forEach(r => {
      r.checkKey = this.preFix + r.itemUuid;
      this.$set(this.checkObj, r.checkKey, storageRecordMap[r.checkKey] || r.checkData || (r.operateType == '91401' ? r.defaultValue == 'true' : ''));
      // 子项
      r.nextRecords && r.nextRecords.forEach(nr => {
        nr.checkKey = this.preFix + nr.itemUuid;
        this.$set(this.checkObj, nr.checkKey, storageRecordMap[nr.checkKey] || nr.checkData || (nr.operateType == '91401' ? nr.defaultValue == 'true' : ''));
      });
      // 处理方式
      r.dealList = [];
      r.jgsxDealUuidZj && r.jgsxDealUuidZj.split(",").forEach(j => r.dealList.push({label: this.dealMap[j], value: j, itemUuid: r.itemUuid,}));
    });
  },
  methods: {
    // 是否选中
    handlerSwitch(isChecked, ck) {
      if (this.isDisabled) {
        return false;
      }
      this.checkObj[ck] = isChecked;
    },
    // 显示选择处理方式
    handlerShowSelect(item) {
      item.showSelect = true;
      this.$forceUpdate();
    },
    // 关闭处理方式选择框
    handlerCloseSelect(item) {
      item.showSelect = false;
      this.$forceUpdate();
    },
    // 处理方式
    handlerConfirm(e, item) {
      console.log(e, item);
      item.checkData = e[0].value;
      item.checkDataLabel = e[0].label;
      item.showSelect = false;
      this.$forceUpdate();
    },
    // 添加疑似收购人员
    handlerAddPersons(rc) {
      console.log("添加疑似收购人员", rc);
      this.addSuspectUuid = rc.itemUuid;
      this.personInfoOpen = true;
    },
    // 确定
    handlerSure() {
      // 处理数据
      Object.keys(this.checkObj).forEach(k => this.recursive(this.records, k));
      console.log("处理后的数据", this.records);
      // 组装登记的人员信息
      let pDatas = [];
      Object.keys(this.personsMap).forEach(k => pDatas = [...pDatas, ...this.personsMap[k],]);
      this.$emit("ok", {records: this.records, suspectedPersons: pDatas, comType: this.menuData.type,});
    },
    // 递归赋值选中项
    recursive(arr, ck) {
      arr.forEach(item => {
        if (item.itemUuid == ck.replace(this.preFix, "")) {
          item.checkData = this.checkObj[ck];
        } else {
          if (item.nextRecords) {
            this.recursive(item.nextRecords, ck)
          }
        }
      })
    },
    // 关闭
    handlerBack() {
      this.$emit("close", true);
    },
    // 嫌疑人登记返回
    handlerPersonBack(p) {
      if (p) {
        !p.uuid && (p.uuid = new Date().getTime());
        p.itemUuid = this.addSuspectUuid;
        p.checkUuid = this.menuData.checkInfo.checkUuid;
        p.retailerUuid = this.menuData.checkInfo.retailerUuid;
        let ps = this.personsMap[this.addSuspectUuid];
        if (ps) {
          let existPs = ps.filter(c => c.uuid != p.uuid);
          existPs.push(p);
          this.personsMap[this.addSuspectUuid] = [...existPs,];
        } else {
          this.personsMap[this.addSuspectUuid] = [p,];
        }
      }
      this.personInfoOpen = false;
    },
    // 编辑嫌疑人信息
    handlerEditPerson(pInfo, pItemUuid) {
      this.personInfo = pInfo;
      this.addSuspectUuid = pItemUuid;
      this.personInfoOpen = true;
    },
    // 删除嫌疑人
    handlerDeletePerson(pInfo, pItemUuid) {
      this.$modal.confirm(`确定删除【${pInfo.personName}】吗?`, () => {
        this.personsMap[pItemUuid] = this.personsMap[pItemUuid].filter(c => c.uuid != pInfo.uuid);
        this.$forceUpdate();
      });
    },
    handlerOpen(idx, sItemUuid) {
      this.cigsMap[sItemUuid].map((c, i) => {
        c.show = i == idx;
      });
      this.$forceUpdate();
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 10px;
}
</style>